<template>
  <div>
    <!-- 选择储值卡类型 -->
    <div class="flex_y_center margin_bottom_15">
      <div class="inp_title">储值卡类型：</div>
      <el-select
        v-model="openForm.prepaid_card_id"
        clearable
        placeholder="请选择储值卡类型"
        style="width: 50%"
        @change="choosePrepaid"
        @focus="getCard('prepaid')"
      >
        <el-option
          v-for="(item, index) of prepaidCardList"
          :key="index"
          :label="item.prepaid_name"
          :value="item.id"
        />
      </el-select>
    </div>
    <!-- 选择充值金额(选择充值卡) -->
    <div class="flex_y_center margin_bottom_15">
      <div class="inp_title">充值金额：</div>
      <el-select
        v-model="storedType"
        clearable
        :disabled="openForm.prepaid_card_id == ''"
        placeholder="请选择充值金额"
        style="width: 50%"
        @change="chooseStored"
        @focus="getCard('stored')"
      >
        <el-option
          v-for="(item, index) of storedCardList"
          :key="index"
          :label="item.prepaid_name"
          :value="item.id"
        />
        <el-option
          v-if="isCustom == 'Y'"
          label="自定义充值金额"
          value="customAmount"
        />
      </el-select>
    </div>
    <!-- 输入自定义充值金额 -->
    <div
      v-show="storedType == 'customAmount'"
      class="flex_y_center margin_bottom_15"
    >
      <div class="inp_title">自定义充值金额：</div>
      <el-input
        v-model="openForm.card_amount"
        clearable
        :placeholder="'最少充值' + minAmount + '元'"
        style="width: 50%"
      />
    </div>
    <!-- 选择赠送礼包 -->
    <div
      v-show="openForm.is_gift == 'Y'"
      class="flex_y_center margin_bottom_15"
    >
      <div class="inp_title">赠送礼包：</div>
      <el-select
        v-model="giftId"
        clearable
        placeholder="请选择充值金额"
        style="width: 50%"
        @change="chooseGift"
        @focus="getGift"
      >
        <el-option
          v-for="(item, index) of giftList"
          :key="index"
          :label="item.gift_desc"
          :value="item.id"
        />
      </el-select>
    </div>
    <div class="flex_between" style="margin-top: 15px">
      <div></div>
      <el-button type="primary" @click="openSettle">开通</el-button>
    </div>

    <!-- 结算对话框 -->
    <el-dialog append-to-body title="收费" :visible.sync="dialogToll">
      <Collection
        :o-prepaid-sn="prepaidSn"
        :receive-payment="openForm.card_amount"
        @send="$emit('send')"
      />
    </el-dialog>
  </div>
</template>

<script>
  import {
    getPrepaidList,
    getPrepaidGift,
    getPrepaidGiftVal,
  } from '@/api/storedValue'
  import { payHandle } from '@/api/order'

  export default {
    components: {
      Collection: () => import('./components/collection.vue'),
    },
    props: {
      oClearBool: {
        type: Boolean,
        default: false,
      },
      oCustomerId: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        prepaidCardList: [], // 存放储值卡列表
        isCustom: '', // Y自定义金额，N不自定义金额
        minAmount: '', // 最小金额
        storedCardList: [], // 存放充值卡列表
        storedType: '', // 充值类型
        giftList: [], // 存放获取的礼包列表
        giftId: '', // 礼包id

        // 开通传递参数
        openForm: {
          prepaid_card_id: '', // 储值卡id
          is_gift: '', // 是否赠送礼包
          card_amount: '', // 充值金额
          receive_type: '', // 领取类型 unlimited无限制, new_customer仅新客 , limit_count领取次数限制
          prepaid_gift_type: '', // 礼包类型 gift_amount赠送金, gift_goods赠品, gift_discount折扣, gift_coupon优惠券
          prepaid_gift_value: '', // 礼包值
          start_at: '', // 有效期开始时间
          expire_at: '', // 有效期结束时间
        },

        dialogToll: false, // 控制收费对话框显示隐藏
        prepaidSn: '', // 获取到的订单号
      }
    },
    watch: {
      // 该变量为true时，证明对话框关闭，初始化对象量属性值
      oClearBool(newValue) {
        if (!newValue) {
          this.prepaidCardList = []
          this.storedCardList = []
          this.isCustom = ''
          this.minAmount = ''
          this.storedType = ''
          this.giftList = []
          this.giftId = ''
          for (let item in this.openForm) {
            this.openForm[item] = ''
          }
        }
      },

      dialogToll(newValue) {
        if (!newValue) {
          this.$emit('send')
        }
      },
    },
    methods: {
      // 获取指定卡类型列表
      getCard(name) {
        const params = {
          prepaid_type: name,
        }
        if (name == 'prepaid' && this.prepaidCardList.length == 0) {
          getPrepaidList(params).then((res) => {
            this.prepaidCardList = res.data
          })
        } else if (name == 'stored' && this.storedCardList.length == 0) {
          getPrepaidList(params).then((res) => {
            this.storedCardList = res.data
          })
        }
      },
      // 选择储值卡
      choosePrepaid() {
        // 初始化form
        for (let item in this.openForm) {
          if (item != 'prepaid_card_id') {
            this.openForm[item] = ''
          }
        }
        this.isCustom = ''
        this.minAmount = ''

        for (let item of this.prepaidCardList) {
          if (item.id == this.openForm.prepaid_card_id) {
            this.isCustom = item.is_custom
            // 判断如果选择储值卡是允许自定义金额时那么，获取最小充值金额，用于检索输入时比较
            if (this.isCustom == 'Y') {
              this.minAmount = item.min_amount
              break
            }
          }
        }
      },
      // 根据选择的充值卡，获取卡充值面额
      chooseStored() {
        // 每次选择充值卡就清空form对象对应属性值一次
        for (let item in this.openForm) {
          if (item != 'prepaid_card_id') {
            this.openForm[item] = ''
          }
        }
        this.giftId = ''
        this.customAmount = '' // 清空自定义金额输入
        // 当用户选择充值卡后，判断用户是否选择了自定义充值金额
        for (let item of this.storedCardList) {
          if (item.id == this.storedType) {
            if (item.min_amount) this.openForm.card_amount = item.min_amount
            this.openForm.is_gift = item.is_gift
            break
          }
        }
      },
      // 获取礼包列表
      getGift() {
        if (this.giftList.length == 0) {
          const params = {
            prepaid_amount: this.openForm.card_amount,
          }
          getPrepaidGift(params).then((res) => {
            this.giftList = res.data
          })
        }
      },
      // 选择礼包后执行
      chooseGift() {
        for (let item of this.giftList) {
          if (item.id == this.giftId) {
            this.openForm.receive_type = item.receive_type
            this.openForm.start_at = item.activity_start_at
            this.openForm.expire_at = item.activity_end_at
            this.openForm.card_amount = item.prepaid_amount
            break
          }
        }
        this.getGiftVal()
      },
      // 获取当前选择的礼包的礼包值
      getGiftVal() {
        const params = {
          id: this.giftId,
        }
        getPrepaidGiftVal(params).then((res) => {
          this.openForm.prepaid_gift_type = res.data[0].prepaid_gift_type
          this.openForm.prepaid_gift_value = res.data[0].prepaid_gift_value
        })
      },
      // 点击开通，创建储值类订单
      openSettle() {
        const params = this.openForm
        params.customer_id = this.oCustomerId
        params.channel_type = 'prepaid'

        // 判断用户是否选择自定义金额
        if (this.storedType == 'customAmount') {
          if (parseInt(this.openForm.card_amount) < parseInt(this.minAmount)) {
            this.$message.error('当前充值金额小于最小充值金额')
            return
          } else {
            this.openForm.is_gift = 'N'
          }
        }

        payHandle(params).then((res) => {
          this.prepaidSn = res.data.prepaid_sn
          this.dialogToll = true
        })
      },
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
  .inp_title {
    width: 30%;
    text-align: right;
  }
  .margin_bottom_15 {
    margin-bottom: 15px;
  }
</style>
